// https://www.w3schools.com/howto/howto_js_scroll_to_top.asp
function topFunction() {
  document.body.scrollTop = 0; // For Safari
  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}

function updateNewsList() {
  // document.getElementById("#news-list-1").style.display
  const newsTabs = document.querySelectorAll(".news .tab-item");
  const newsLists = document.querySelectorAll(".news .news-list");

  let activeItem = 1;
  if (document.location.hash === "#news-list-2") {
    activeItem = 2;
  } else if (document.location.hash === "#news-list-3") {
    activeItem = 3;
  }

  for (let i = 0; i < 3; i++) {
    if (i === activeItem - 1) {
      newsTabs[i].classList.add("active");
      newsLists[i].classList.remove("d-hide");
    } else {
      newsTabs[i].classList.remove("active");
      newsLists[i].classList.add("d-hide");
    }
  }
}

function switchClientsGallery() {
  const g1 = document.querySelector(".bands-gallery-1");
  const g2 = document.querySelector(".bands-gallery-2");
  const [b1, b2] = [...document.querySelectorAll(".clients-nav button")];
  if (b1.disabled) {
    b1.disabled = false;
    b2.disabled = true;
    g1.classList.add("d-hide");
    g2.classList.remove("d-hide");
  } else {
    b2.disabled = false;
    b1.disabled = true;
    g2.classList.add("d-hide");
    g1.classList.remove("d-hide");
  }
  console.log(g1.classList, g2.classList);
}

const btn1 = document.getElementById("btn-tab-1");
const btn2 = document.getElementById("btn-tab-2");
let activeBtn = btn1;
let inactiveBtn = btn2;
const tab1 = document.querySelector(".clients-tab-1");
const tab2 = document.querySelector(".clients-tab-2");
function swithcClientTabs(e) {
  //   console.log("=>", e.target.dataset.tab);
  if (activeBtn === e.target) return;
  [activeBtn, inactiveBtn] = [inactiveBtn, activeBtn];
  activeBtn.classList.add("active");
  inactiveBtn.classList.remove("active");
  if (activeBtn === btn1) {
    tab1.classList.remove("d-hide");
    tab2.classList.add("d-hide");
  } else {
    tab2.classList.remove("d-hide");
    tab1.classList.add("d-hide");
  }
}

// https://javascript.info/onload-ondomcontentloaded
function ready() {
  updateNewsList();
  window.addEventListener("hashchange", updateNewsList);
  document
    .getElementById("btn-tab-1")
    .addEventListener("mouseover", swithcClientTabs);
  document
    .getElementById("btn-tab-2")
    .addEventListener("mouseover", swithcClientTabs);
}

document.addEventListener("DOMContentLoaded", ready);

// http://web.hcloudweb.com/jisuan/jieguo?djxl=1&djgl=2&jzsj=3&jzdl=4&xzsj=5&xzdl=6&dfdj=7&yyxs=8

const calcForm = document.querySelector("form#calc");
calcForm.addEventListener("submit", function (e) {
  e.preventDefault();
  const vals = [...calcForm.querySelectorAll(".calc-inputs-item input")].map(
    (i) => i.value
  );
  // 不支持 CORS，只能作罢
  const url = `http://web.hcloudweb.com/jisuan/jieguo?djxl=${vals[0]}&djgl=${vals[1]}&jzsj=${vals[2]}&jzdl=${vals[3]}&xzsj=${vals[4]}&xzdl=${vals[5]}&dfdj=${vals[6]}&yyxs=${vals[7]}`;
  console.log(url);
  document.querySelector(".calc-result-1").textContent = vals
    .join("")
    .slice(0, 4);
  document.querySelector(".calc-result-2").textContent = vals.join("").slice(4);
});

function toggleMobileNav(e) {
  console.log("Toggle mobile nav", e.target);

  const nav = document.querySelector(".mobile-nav");
  nav.classList.toggle("d-hide");

  const icon = document.querySelector(".toggle-mobile-nav-btn i");
  if (icon.classList.contains("icon-menu")) {
    icon.classList.remove("icon-menu");
    icon.classList.add("icon-cross");
  } else {
    icon.classList.add("icon-menu");
    icon.classList.remove("icon-cross");
  }
}

document
  .querySelector(".toggle-mobile-nav-btn")
  .addEventListener("click", toggleMobileNav, { capture: true });
